<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getVIPPayList } from '@/api';
import { isMobileTerminal } from '@/utils';
import { Payment, PayMenuItem } from './components';
import { useRouterStore } from '@/store';

import type { VipResData, VipResDataItem } from './types';

const router = useRouter();
const routerStore = useRouterStore();

const currentPayData = ref<VipResDataItem>({} as VipResDataItem);
const vipPayList = ref<VipResData>([]);
async function getVipPayListData() {
  const list = await getVIPPayList<VipResData>();
  vipPayList.value = list;
  currentPayData.value = list[0];
}

const onChangeCurrentPay = (item: VipResDataItem) => {
  currentPayData.value = item;
};

const onNavbarLeftClick = () => {
  routerStore.changeRouterType('back');
  router.back();
};

getVipPayListData();
</script>

<template>
  <div class="h-full bg-zinc-200 duration-400 xl:pt-1 dark:bg-zinc-800">
    <div
      class="mx-auto max-w-[1024px] bg-white duration-400 xl:rounded-sm xl:border-[1px] xl:border-zinc-200 xl:px-4 dark:bg-zinc-900 xl:dark:border-zinc-600"
    >
      <!-- 移动端 navbar 处理 -->
      <MNavBar v-if="isMobileTerminal" sticky :clickLeft="onNavbarLeftClick">
        精选会员
      </MNavBar>

      <div class="px-1 py-2">
        <h2
          class="text-center text-[34px] font-bold tracking-widest text-yellow-600"
        >
          精选VIP
        </h2>
        <p class="text-center text-lg text-yellow-500">
          升级精选VIP，畅想所有内容
        </p>
        <div
          class="scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent mt-5 flex justify-between overflow-auto pb-2"
        >
          <PayMenuItem
            v-for="item in vipPayList"
            :key="item.id"
            :hot="item.isHot"
            :selected="item.id === currentPayData.id"
            :data="item"
            @click="onChangeCurrentPay"
          />
        </div>
        <p class="mt-1 text-sm text-zinc-500">{{ currentPayData.desc }}</p>
        <!-- 支付 -->
        <Payment class="mt-4" :payData="currentPayData" />
      </div>
    </div>
  </div>
</template>
